<template>
  <div class="infoImportManagement-container">
    <el-row class="header-btn">
      <el-col :span="12" class="editAdd">
        <el-button icon="el-icon-upload2" type="primary" size="small" @click="addDialogVisible = true">
          选择文件
        </el-button>
        <el-button type="primary" size="small" @click="synchronizeStudentInfo">
          同步到学生管理
        </el-button>
        <el-button icon="el-icon-delete" type="danger" size="small" @click="handleDelete">
          批量删除
        </el-button>
      </el-col>
      <el-col :span="12" class="query">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
                size="small"
                v-model.trim="queryForm.query"
                placeholder="请输入查询条件"
                clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-alert
        id="tip"
        title="以下数据只作为基础数据，不能进行操作"
        type="info"
        show-icon
        :closable="false">
    </el-alert>

    <el-table
        :data="studentList"
        height="520"
        :element-loading-text="elementLoadingText"
    >
      <el-table-column show-overflow-tooltip type="selection"></el-table-column>
<!--      <el-table-column type="index"></el-table-column>-->
<!--      <el-table-column prop="id" label="id" width="62px"></el-table-column>-->
      <el-table-column prop="stuName" label="姓名" width="136px"></el-table-column>
      <el-table-column prop="age" sortable label="年龄" width="80px"></el-table-column>
      <el-table-column prop="sex" label="性别" width="72px"></el-table-column>
      <el-table-column prop="major" sortable label="专业"></el-table-column>
      <el-table-column prop="nativePlace" sortable label="籍贯" width="126px"></el-table-column>
      <el-table-column prop="idCard" label="身份证号码"></el-table-column>
      <el-table-column prop="graduateSchool" label="毕业中学" show-overflow-tooltip width="166px"></el-table-column>
      <el-table-column prop="admissionNumber" label="学生考号"></el-table-column>
    </el-table>

    <el-dialog
        title="新生信息导入"
        :visible.sync="addDialogVisible"
        width="40%">
      <!-- 内容主体区域 -->
      <el-upload
          class="upload-demo"
          ref="upload"
          action="http://localhost:8686/frms/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
      </el-upload>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      studentList: null,
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        query: '',
        pageNum: 1,
        pageSize: 10,
      },
      addDialogVisible: false,
    }
  },
  created() {

    this.queryData()
  },
  methods: {
    setSelectRows(val) {
      this.selectRows = val
    },
    handleEdit() {

    },
    handleDelete() {

    },
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryForm.pageSize = newSize
      this.queryData()
    },
    handleCurrentChange(newPage) {
      this.queryForm.pageNum = newPage
      this.queryData()
    },
    async queryData() {
      const {data : res} = await this.$http.get('basicStudents', { params : this.queryForm })
      // console.log(res)
      this.studentList = res.data
      this.total = res.total
    },

    beforeUpload(file) {
      // console.log(file)
      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'xls'
      const extension2 = testmsg === 'xlsx'
      if(!extension && !extension2) {
        this.$message({
          message: '上传文件只能是 xls、xlsx格式!',
          type: 'warning'
        });
      }
      return extension || extension2
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(res) {
      // console.log(res)
      if (res.code != 200) return this.$message.error(res.msg)
      this.$message.success(res.data)
      this.queryData()
    },
    async synchronizeStudentInfo() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const {data : res} = await this.$http.post('synchronizeStudentInfo')
      if (res.code == 500) {
        loading.close();
        return this.$message.error(res.msg)
      }
      loading.close();
      this.$message.success("信息已更新到学生信息页面")
    },

  }
}
</script>

<style lang="less" scoped>
.infoImportManagement-container {
  width: 98%;
  background: white;
  padding: 12px 16px 12px 16px;
}

#tip {
  width: 80%;
  background: white;
  margin-bottom: 6px;
  color: #E6A23C;
}
.header-btn {
  //text-align: left;
  //display: flex;
  //justify-content: space-between;
  //align-items: center;
  //color: black;
  //font-size: 20px;

  >.editAdd {
    height: 42px;
    display: flex;
    align-items: center;
    justify-items: center;
  }

  .query {
    height: 22px;
    margin-top: 22px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
  }
}
.el-table >.el-table-column {
  height: 12px;
}

</style>
